<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
    html,body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      color:#000;
      position: relative;
      background-image: url('1.jpg');
      background-repeat: no-repeat;
      background-position: -50px -50px;
      background-size: auto 150%;
    }
    #div {
      position: absolute;
      left: 160px;
      top: 140px;
    }
    #div2 {
      position: absolute;
      left: 160px;
      top: 340px;
    }
  </style>
</head>
<body>
  <div id="div">
    <div>测试1</div>
  </div>
  <div id="div2">
    <div>测试2</div>
  </div>
  <script src="zepto.min.js" charset="utf-8"></script>
  <script src="touch.js" charset="utf-8"></script>
  <script type="text/javascript">
  document.addEventListener('touchmove', function (event) {
    event.preventDefault();
  }, false);
    $(document).ready(function () {
      var div = $('#div')[0];
      var body = $('body');
      var interval;
      var divLeft = Number($('#div').css('left').slice(0,-2));
      var divTop = Number($('#div').css('top').slice(0,-2));
      var divLeft2 = Number($('#div2').css('left').slice(0,-2));
      var divTop2 = Number($('#div2').css('top').slice(0,-2));
      var touchstartLeft;
      var touchstartTop;
      var MovePositionY;
      // 抛物线公式y=x*x;
      var moveChangeNumber = [0,90];
      var pointer = [0,Math.PI/2];
      var position = -50;

      body.on('touchstart',function (e) {
        touchstartLeft = e.touches[0].pageX;
        touchstartTop = e.touches[0].pageY;
      })

      body.on('touchmove',function (e) {
        MovePositionX = e.touches[0].pageX;
        MovePositionY = e.touches[0].pageY;
        if( MovePositionX > touchstartLeft ) {//MovePositionY > touchstartTop ||
          // 下移事件、右移事件
          touchstartTop = MovePositionY;
          touchstartLeft = MovePositionX;
          position++;
          $(body).css({'background-position':position+'px'+' '+position+'px'})
          for (var i = 0; i < moveChangeNumber.length; i++) {
            moveChangeNumber[i]+=2;
            move(moveChangeNumber[i],i);
          }
        }
        if( MovePositionX < touchstartLeft) {//MovePositionY < touchstartTop ||
          // 上移事件、左移事件
          touchstartTop = MovePositionY;
          touchstartLeft = MovePositionX;
          position--;
          $(body).css({'background-position':position+'px'+' '+position+'px'})
          for (var i = 0; i < moveChangeNumber.length; i++) {
            moveChangeNumber[i]-=2;
            move(moveChangeNumber[i],i);
          }
        }
      });
      function move(de,type) {
        // 弧度的计算公式为： 2*PI/360*角度；
        var hudu;
        switch (type) {
          case 1:
            hudu = 2*Math.PI/360*de;
            divLeft2 = mathT(hudu,0);
            divTop2 =  mathT(hudu,1);
            div2.style.left = divLeft2+'px';
            div2.style.top = divTop2+'px';
            break;
          default:
            hudu = 2*Math.PI/360*de;
            divLeft = mathT(hudu,0);
            divTop =  mathT(hudu,1);
            div.style.left = divLeft+'px';
            div.style.top = divTop+'px';
        }
      }
      function mathT(hudu,type) {
        switch (type) {
          case 1:
            return 100*(Math.sin(hudu)-Math.cos(hudu))+240
            break;
          default:
            return -100*(Math.sin(hudu)+Math.cos(hudu))+260
        }
      }
    })
  </script>
</body>
</html>
